<template>
  <view class="vaccine-item">
    <view class="flex-box" @click="linkTo(itemData.id)">
      <view class="vaccine-header">
        <view class="name">{{ itemData.name }}</view>
        <view
          class="type"
          :class="
            itemData.species.indexOf('非') == -1 ? 'species' : 'notspecies'
          "
          >{{ itemData.species }}</view
        >
      </view>
      <view class="times" v-if="itemData.times != null">{{
        itemData.times | tiemsFilter
      }}</view>
    </view>

    <view class="introduction" @click="linkTo(itemData.id)">{{
      itemData.introduction
    }}</view>
  </view>
</template>

<script>
export default {
  name: "vaccineItem",
  data() {
    return {};
  },

  props: {
    itemData: {
      require: true,
    },
  },

  filters: {
    tiemsFilter(times) {
      switch (times) {
        case 1:
          return "第一针";
        case 2:
          return "第二针";
        case 3:
          return "第三针";
        case 4:
          return "第四针";
      }
    },
  },
  components: {},

  methods: {
    // 链接到详情
    linkTo(id) {
      uni.navigateTo({
        url: "/pages/Vaccine/VaccineDetail/index?id=" + id,
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.vaccine-item {
  background: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  .flex-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .vaccine-header {
      display: flex;
      align-items: center;
      .name {
        font-size: 34rpx;
      }
      .type {
        margin-left: 20rpx;
        border: 1rpx solid;
        padding: 5rpx;
        font-size: 22rpx;
        border-radius: 5rpx;
        &.species {
          border-color: $themeColor1;
          color: $themeColor1;
        }
        &.notspecies {
          border-color: #f7b755;
          color: #f7b755;
        }
      }
    }
    .times {
      font-size: 24rpx;
      color: #999;
    }
  }

  .introduction {
    font-size: 24rpx;
    margin-top: 15rpx;
    color: #999;
  }
}
</style>